<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 3. 实现一个步进器 （购物车的加减）.
如果数量等于1时，减少按钮变成灰色不可点击状态，如果数量大于等于10时，增加按钮变成不可点击状态。 -->

<body>
    <div id="app">
        <h1> {{a}} </h1>
        <button @click="add" :disabled="a >= 10">+</button>
        <button @click="abb" :disabled="a === 1">-</button>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue;
    const app = createApp({

        setup() {
            let a = ref(1);

            function add() {
                if (a.value < 10) {
                    a.value++;
                }
            }

            function abb() {
                if (a.value > 1) {
                    a.value--;
                }
            }

            return {
                a,
                add,
                abb
            }
        }
    }).mount('#app')
</script>

</html>